<template>
  <x-drawer :visible.sync="modalVisible" background="none" @cancel="handleClose">
    <view class="p-drawer">
      <view class="_header">
        <text class="_title">服务信息</text>
        <view class="icon" @click="handleClose">
          <x-icon name="icon-025" size="28" color="#C8C9CC"></x-icon>
        </view>
      </view>
      <scroll-view class="_scroll" scroll-y="true">
        <view class="_content">
          <view class="_list" v-for="(item,index) in attrList" :key="index">
            <view class="_title">{{ item.attrName }}</view>
            <view class="_text">{{ item.attrValue }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </x-drawer>
</template>

<script>
import XDrawer from '@/components/x-drawer';
import XIcon from '@/components/x-icon';

export default {
  name: 'PDrawerSpec',
  components: {
    XDrawer,
    XIcon
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    attrList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      modalVisible: this.visible
    };
  },
  computed: {

  },
  created() {},
  methods: {
    //  关闭分享弹框
    handleClose() {
      this.modalVisible = false;
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-drawer{
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  min-height: 800px;
  max-height: 1000px;
  ._header {
    text-align: center;
    padding: 36px 40px;
    ._title {
      font-size: 32px;
      color: #323233;
      padding-left: 80px;
    }
    .icon {
      width: 80px;
      height: 80px;
      text-align: right;
      float: right;
    }
  }
  ._scroll{
    min-height: 680px;max-height: 880px;
    ._content{
      padding: 30px 24px 80px 24px;
    }
    ._list{
      border-bottom: 1px solid #EBEDF0;
      padding: 30px 0;
      font-size: 26px;
      display: flex;
      align-items: flex-start;
      ._title{
        width: 130px;
        margin-right: 10px;
        color: #888888;
        flex: none;
      }
    }
  }
}
</style>
